<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>TODOlist和全局组件的使用</title>
		<script type="text/javascript" src="../vue.js" ></script>
	</head> 
	<body>
		<div id = "root">
			<input type = "text" v-model="inputValue" />
			<button v-on:click="handleBtnClick">提交</button>
			<ul>
				<todo-item v-bind:content = "item" 
					v-for = "item of list">
				</todo-item>
			</ul>
		</div>
	</body>
	<script>
	 //props:从父组件中接收什么样的内容,外部传递过来的数据
	 // VUE提供全局创建组件的方法
	 Vue.component("TodoItem",{
	 	props : ['content'],
	 	template : "<li>{{content}}</li>"
	 });
	 //生命周期函数就是Vue实例在某个时间点会自动执行的函数
	  var vm = new Vue({
	  	el : "#root",
	  	data : {
		  		list : [],
		  		inputValue : ''
	  	},
	  	methods : {
	  		handleBtnClick : function(){
	  			if(this.inputValue != ''){
	  				this.list.push(this.inputValue);
	  				this.inputValue = '';
	  			}
	  		}
	  	}
	  });
	</script>
</html>
